<template>
  <div class="app-container">
    <div class="content">
      <div class="left">
        <template>
          <el-select
            v-model="queryParam.interOfpro"
            placeholder="项目列表"
            clearable
            size="small"
          >
            <el-option
              v-for="pro in simpleProList"
              :key="pro.id"
              :label="pro.proName"
              :value="pro.id"
            />
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            v-preventReClick
            >搜索</el-button
          >
          <hr />
          <el-table
            :data="interData"
            style="width: 100%; overflow: auto"
            border
            max-height="70vh"
            @row-click="clickRow"
            :highlight-current-row="true"
          >
            <el-table-column
              prop="interName"
              label="接口名称"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <i class="el-icon-notebook-1"></i>
                <span style="margin-left: 10px">{{ scope.row.interName }}</span>
                <i class="el-icon-right" style="float: right"></i>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="right">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="标头" name="first" v-loading="loading">
            <div style="height: 70vh; overflow: auto">
              <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                  <template slot="title">
                    <span class="span_title"> 常规 </span>
                  </template>
                  <div class="el_col_item">
                    <div>
                      <span> 请求网址： </span>
                      <span>{{ form.interPath }}</span>
                    </div>
                    <div>
                      <span> 请求方法： </span>
                      <span>{{ getMethod }}</span>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template slot="title">
                    <span class="span_title"> 接口信息 </span>
                  </template>
                  <div class="el_col_item">
                    <div>
                      <span> 接口名称： </span>
                      <span>{{ form.interName }}</span>
                    </div>
                    <div>
                      <span> 接口编号： </span>
                      <span>{{ form.interCode }}</span>
                    </div>
                    <!-- <div>
                      <span> 接口请求参数(header)： </span>
                      <span>{{ form.interParamHeader }}</span>
                    </div> -->
                    <div>
                      <span> 接口请求参数(body)： </span>
                      <span>{{ form.interParamBody.bodyData }}</span>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    <span class="span_title"> 请求头信息 </span>
                  </template>
                  <div class="el_col_item">
                    <div v-for="(value, key) in getHeader" :key="key">
                      <span v-if="key !== ''"> {{ key }}:</span>
                      <span>{{ value }}</span>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-if="showBtn" style="float: right; margin-top: 10px">
              <el-button
                type="primary"
                icon="el-icon-caret-right"
                size="mini"
                @click="handleExecute"
                v-preventReClick
                >执行</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="响应预览" name="second">
            <div class="requestResult">
              <el-result
                icon="success"
                title="接口执行成功"
                subTitle="返回数据如下"
                v-if="ResponseResult === 1"
              >
              </el-result>
              <el-result
                icon="error"
                title="接口执行失败"
                subTitle="无数据返回"
                v-else-if="ResponseResult === 2"
              >
              </el-result>
              <el-result
                icon="info"
                title="暂无接口执行"
                subTitle="无数据返回"
                v-else
              >
              </el-result>
            </div>
            <div class="requestData">
              <div style="height: 50vh; overflow: auto">
                <el-collapse value="1">
                  <el-collapse-item name="1">
                    <template slot="title">
                      <span class="span_title"> 返回数据 </span>
                    </template>
                    <div class="el_col_item">
                      <div>
                        <span>{{ ResponseData }}</span>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="时间" name="third">
            <el-descriptions title="Times">
              <el-descriptions-item label="接口响应时间">
                {{ ResponseTime }} ms
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {
  SimplelistInterface,
  DetailInterface,
  executeInterface,
  listInterface,
} from "@/api/dmsIms/interface";
import { analysisHeader } from "@/utils/ruoyi";
export default {
  name: "InterfaceExecute",
  computed: {
    // vuex中的state方法简写方式
    ...mapState({
      simpleProList: (state) => state.prolist.simpleProList,
    }),
    getUrl() {
      if (this.form.proBaseurl === null && this.form.interPath === null) {
        return null;
      }
      return this.form.proBaseurl + this.form.interPath;
    },
    getMethod() {
      if (this.form.interType === null) {
        return null;
      }
      let res;
      switch (this.form.interType) {
        case "1":
          res = "GET";
          break;
        case "2":
          res = "POST";
          break;
        case "3":
          res = "PUT";
          break;
        case "4":
          res = "PATCH";
          break;
        case "5":
          res = "DELETE";
          break;
        default:
          res = "OTHER";
      }
      return res;
    },
    getHeader() {
      if (this.form.interParamHeader === null) {
        return null;
      }
      return analysisHeader(this.form.interParamHeader);
    },
  },
  data() {
    return {
      activeName: "first",
      interData: [],
      queryParam: {},
      activeNames: ["1", "2", "3"],
      form: {
        id: null,
        interCode: null,
        interName: null,
        interOfpro: null,
        interParamBody: {
          bodyType: "none",
          bodyData: "",
        },
        interParamHeader: null,
        interPath: null,
        interType: null,
        proBaseurl: null,
        proHeader: null,
      },
      ResponseData: null,
      ResponseTime: null,
      ResponseResult: 0,
      loading: false,
      showBtn: false,
    };
  },
  created() {
    // 如果项目列表数据为空，则去获取项目列表
    if (this.simpleProList.length <= 0) {
      this.getProList();
    }
    this.getInterList();
  },
  methods: {
    // vuex中的actions方法简写方式
    ...mapActions(["getProList"]),
    resetResponse() {
      this.ResponseResult = 0;
      this.ResponseData = null;
      this.ResponseTime = null;
    },
    resetForm() {
      this.form = {
        id: null,
        interCode: null,
        interName: null,
        interOfpro: null,
        interParamBody: {
          bodyType: "none",
          bodyData: "",
        },
        interParamHeader: null,
        interPath: null,
        interType: null,
        proBaseurl: null,
        proHeader: null,
      };
    },
    getInterList() {
      // 为空时不显示
      listInterface(this.queryParam).then((response) => {
        this.interData = response.rows;
      });
    },
    /** 查询项目中的接口 */
    handleQuery() {
      if (this.queryParam.interOfpro !== null) {
        SimplelistInterface(this.queryParam.interOfpro).then((response) => {
          this.interData = response.rows;
        });
      }
    },
    /** 接口详情获取 */
    clickRow(row) {
      this.activeName = "first";
      this.resetForm();
      this.resetResponse();
      this.loading = true;
      DetailInterface({ id: row.id }).then((res) => {
        if (res?.data) {
          this.form = res.data;
          try {
            this.form.interParamBody = JSON.parse(this.form.interParamBody) || {
              bodyType: "none",
              bodyData: "",
            };
          } catch (error) {
            this.form.interParamBody = {
              bodyType: "none",
              bodyData: "",
            };
          }
          this.showBtn = true;
        }
        this.loading = false;
      });
    },
    /** 执行接口 */
    handleExecute() {
      this.loading = true;
      executeInterface(this.form.id)
        .then((response) => {
          // console.log(response);
          if (response.data.hasOwnProperty("errorMsg")) {
            this.ResponseResult = 2;
            this.ResponseData = response.data.errorMsg;
            // {this.ResponseData,this.ResponseTime} = response.data;
          } else {
            this.ResponseResult = 1;
            this.ResponseData = response.data.ResponseData;
            this.ResponseTime = response.data.ResponseTime;
          }
          //跳转到第二个标签
          this.activeName = "second";
          this.loading = false;
        })
        .catch((error) => {
          this.activeName = "second";
          this.loading = false;
          this.ResponseResult = 2;
          this.ResponseData = error;
        });
    },
  },
};
</script>

<style scoped>
p {
  text-align: center;
  font-weight: bold;
  border-radius: 1px;
  position: relative;
}
.content {
  display: flex;
}
.left {
  width: 20vw;
  margin-right: 20px;
}
.right {
  width: 50vw;
}
.span_title {
  font-weight: bolder;
  font-size: 18px;
}
.el_col_item > div {
  margin-bottom: 5px;
}
.el_col_item > div > span:nth-child(1) {
  font-weight: bold;
  margin-left: 20px;
  word-break: break-all;
}
.el_col_item > div > span:nth-child(2) {
  color: rgb(95, 95, 95);
  margin-left: 5px;
  word-break: break-all;
}
</style>
